<script setup>
    
</script>
    
<template>
    <div class="home-container">
      <div class="home-systemName">
        <h3>培训计划管理</h3>
      </div>
      <table>
        <thead>
            <tr>
                <th colspan="7">培训计划(2024/10/28 - 2024/11/03)</th>
            </tr>
            <tr>
                <th rowspan="2" colspan="2">客户</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Web</th>
                <th>Thu</th>
                <th>Fri</th>
            </tr>
            <tr>
                <th>28-Oct</th>
                <th>29-Oct</th>
                <th>30-Oct</th>
                <th>31-Oct</th>
                <th>32-Oct</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="2">巨化</th>
                <th>歌瑞</th>
                <th>
                    <div class="class_item">
                        <div class="tool">
                            <div class="del_box">
                                 <el-icon><DeleteFilled /></el-icon>
                            </div>
                           <div class="edit_box">
                                <el-icon><EditPen /></el-icon>
                           </div>
                            <div class="check_box">
                                <el-checkbox />
                            </div>
                            
                        </div>
                        <div class="class_info">
                            <div class="title">JES体系</div>
                            <div class="content">1.培训时间为2024年11月3..</div>
                        </div>
                        <div class="teacher">
                            魏文雅老师,周星刚老师 - 全天
                        </div>
                    </div>
                </th>
                <th class="empty_box">暂无计划</th>
                <th class="empty_box">暂无计划</th>
                <th class="empty_box">暂无计划</th>
                <th class="empty_box">暂无计划</th>
                <th class="empty_box">暂无计划</th>
            </tr>
            <tr>
                <th>总部</th>
                <th>
                    <div class="class_item">
                        <div class="tool">
                            <div class="del_box">
                                 <el-icon><DeleteFilled /></el-icon>
                            </div>
                           <div class="edit_box">
                                <el-icon><EditPen /></el-icon>
                           </div>
                            <div class="check_box">
                                <el-checkbox />
                            </div>
                            
                        </div>
                        <div class="class_info">
                            <div class="title">JES体系</div>
                            <div class="content">这是测试</div>
                        </div>
                        <div class="teacher">
                            周昊老师 - 上午
                        </div>
                    </div>
                </th>
                <th class="empty_box">暂无计划</th>
                <th class="empty_box">暂无计划</th>
                <th class="empty_box">暂无计划</th>
                <th class="empty_box">暂无计划</th>
                <th class="empty_box">暂无计划</th>
            </tr>
        </tbody>
      </table>
    </div>
</template>
    
<style scoped lang="less">
.home-container {
  background-color: #fff;
  padding: 20px;
}
.home-systemName {
   h3 {
    font-weight: normal
   }
}

.table-systemName-time {
    padding: 20px 0;
    text-align: center;
    border: #ebeef5 1px solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
   }
   .inp {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    .left {
      width: 50%;
      display: flex;
    }
    .el-form-item {
      margin-right: 10px;
    }
   }

   ::v-deep .el-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
::v-deep  .el-dialog .el-form-item  {
    display: block;
    width: 30%;
  }

  ::v-deep .el-dialog .el-form-item__label {
    color: black;
    font-size: 14px;
    margin-bottom: 5px;
  }
  ::v-deep .el-dialog .el-input__count {
  bottom: -15px !important;
}


table {
    width: 100%;
    border-collapse: collapse;
}

th {
    border: 1px solid #f6f6f6;
    padding: 15px;
}

tbody th {
    font-size: 15px;
    font-weight: 400;
}

.class_item {
    font-size: 12px;
}
.class_item .tool {
    width: 100%;
    display: flex;
    justify-content: end;
}

.class_info {
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e3e3;
}
.check_box {
    margin-top: -5px;
}

.del_box,.edit_box {
    margin-right: 10px;
}
 .teacher {
    padding: 10px;
}

.empty_box {
    padding: 30px;
    font-size: 16px;
    color: #d4d9df;
}
</style>